<template>
	<view class="wrap">
		<view class="search">
			<u-search v-model="keywords" @custom="search" @search="search"></u-search>
		</view>
		<scroll-view class="scroll-list msg-list-item" scroll-y="true">
			<view v-for="(item,index) in msgList" :key="index">
				<view class="msg-time">{{item.messageDetail.time.split(' ')[1]}}</view>
				<u-card :title="item.nickName" :sub-title="item.messageDetail.time.split(' ')[0]" padding="30" margin="0rpx 20rpx"
					:thumb="item.img" thumb-circle @click="navTo('/pages/sys/msg/form')">
					<view class="" slot="body">
						<view class="u-body-item u-flex  u-col-between u-p-t-0">
							<view class="u-body-item-title u-line-2">
								{{item.messageDetail.message}}
							</view>
						</view>
					</view>
				</u-card>
			</view>
			<u-divider>已经到底了</u-divider>
		</scroll-view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				keywords: '',
				msgList: []
			};
		},
		onLoad() {
			this.msgList = this.$store.state.readMsgList
		},
		methods: {
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			search(value) {
				this.$u.toast('搜索内容为：' + value)
			}

		}
	};
</script>
<style lang="scss">
	@import '../../../common/uni.css';

	page {
		background-color: #f5f5f5;
	}

	.wrap .search {
		background: #ffffff;
	}

	.msg-time {
		font-size: 26rpx;
		padding: 10px 0;
		color: #999999;
		text-align: center;
	}

	.u-card__foot {
		.u-icon {
			margin-right: 10px;
		}
	}
</style>
